<script setup lang="ts">
import svg_404 from '@/assets/404.svg'
import { Route } from '@/router'
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<template>
  <main class="relative h-screen overflow-hidden bg-white">
    <div
      class="container relative z-10 flex items-center px-6 py-32 mx-auto md:px-12"
    >
      <div
        class="container relative flex flex-col items-center justify-between px-6 mx-auto"
      >
        <div
          class="flex flex-col items-center justify-center w-full mb-16 space-x-12 md:flex-row md:mb-8"
        >
          <h1 class="text-6xl font-thin text-center text-gray-800">
            GOT LOST ?
          </h1>
          <button
            class="px-3 py-2 text-2xl font-light uppercase transition duration-200 ease-in border-b border-yellow-600 w-96 hover:bg-yellow-600 hover:text-white focus:outline-none"
            @click="
              () => {
                router.replace({ name: Route.MAIN })
              }
            "
          >
            Go To Home Page
          </button>
        </div>
        <div class="relative block w-full mx-auto mt-6 md:mt-0">
          <img :src="svg_404" alt="" class="max-w-2xl m-auto" />
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss">
.cls-1 {
  fill: #d6b49a;
}
.cls-1,
.cls-10,
.cls-11,
.cls-13,
.cls-14,
.cls-15,
.cls-17,
.cls-2,
.cls-4,
.cls-5,
.cls-6 {
  stroke: #000;
}
.cls-1,
.cls-11,
.cls-13,
.cls-14,
.cls-16,
.cls-8 {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cls-1,
.cls-10,
.cls-11,
.cls-12,
.cls-13,
.cls-14,
.cls-15,
.cls-16,
.cls-17,
.cls-2,
.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-7,
.cls-8,
.cls-9 {
  stroke-width: 3px;
}
.cls-2 {
  fill: #020202;
}
.cls-10,
.cls-12,
.cls-15,
.cls-17,
.cls-2,
.cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-7,
.cls-9 {
  stroke-miterlimit: 10;
}
.cls-3 {
  fill: #818181;
}
.cls-12,
.cls-16,
.cls-3,
.cls-7,
.cls-8,
.cls-9 {
  stroke: #191818;
}
.cls-4 {
  fill: #dcdbda;
}
.cls-5 {
  fill: #4ea7f1;
}
.cls-14,
.cls-6 {
  fill: #f8f3ed;
}
.cls-16,
.cls-7 {
  fill: #333;
}
.cls-13,
.cls-8 {
  fill: none;
}
.cls-9 {
  fill: #f8f59c;
}
.cls-10,
.cls-11 {
  fill: #f3d2c9;
}
.cls-15 {
  fill: #8bb174;
}
.cls-17 {
  fill: #da4e22;
}
</style>
